import React from 'react';
import { View, StyleSheet, Platform, StatusBar as RNStatusBar } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Colors } from '../constants/colors';

interface StatusBarProps {
  backgroundColor?: string;
}

export default function StatusBar({ backgroundColor = Colors.primary }: StatusBarProps) {
  const insets = useSafeAreaInsets();

  return (
    <>
      <RNStatusBar
        backgroundColor={backgroundColor}
        barStyle="light-content"
        translucent={Platform.OS === 'android'}
      />
      {Platform.OS === 'ios' && (
        <View
          style={[
            styles.statusBarFill,
            {
              height: insets.top,
              backgroundColor,
            },
          ]}
        />
      )}
    </>
  );
}

const styles = StyleSheet.create({
  statusBarFill: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1000,
  },
});